<template>
  <div class="box">
    <div class="box-top">
      <div class="box-title">
        <h3>后台管理系统</h3>
        <span>v3.0</span>
      </div>

      <el-form ref="ruleFormRef" :model="data.ruleForm" status-icon :rules="data.rules" class="demo-ruleForm">
        <el-form-item prop="userName">
          <div class="box-login">
            <el-input v-model="data.ruleForm.userName" class="w-50 m-2" size="large" clearable placeholder="登录账号"
              :prefix-icon="UserFilled" />
          </div>
        </el-form-item>
        <el-form-item prop="pwd">
          <div class="top-password">
            <el-input v-model="data.ruleForm.pwd" class="w-50 m-2" size="large" type="password" show-password
              placeholder="登录密码" :prefix-icon="Lock" />
          </div>
        </el-form-item>
        <el-form-item prop="imgcode">
          <div class="top-code">
            <el-input v-model="data.ruleForm.imgcode" class="w-50 m-2" size="large" clearable placeholder="验证码"
              :prefix-icon="PictureFilled" />
            <img ref="img" :src="data.src" @click="ver" />
          </div>
        </el-form-item>
        <div class="box-radio">
          <el-checkbox v-model="data.ruleForm.rememberMe" label="记住登录状态" size="large" />
        </div>
        <div class="box-button">
          <el-button type="primary" @click="submitForm">登录</el-button>
        </div>
        <div class="box-fort">
          <p>开通新后台</p>
          <p class="px">忘记密码?</p>
          <p>有问题找客服</p>
        </div>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100vh;
  background-color: #2d3a4b;

  .box-top {
    width: 448px;
    padding-top: 160px;
    padding-left: 35px;
    padding-right: 35px;
    margin: 0 auto;
  }

  .box-title {
    margin: 0 0 40px;
    display: flex;
    justify-content: center;

    h3 {
      font-size: 26px;
      color: white;
    }

    span {
      padding-top: 13px;
      margin-left: 5px;
      color: #ffffff;
      font-size: 16px;
    }
  }

  .top-password {
    margin-top: 25px;
  }

  .top-code {
    margin-top: 25px;
    position: relative;

    img {
      width: 80px;
      height: 40px;
      position: absolute;
      right: 10px;
      top: 0;
    }
  }

  .box-radio {
    margin-top: 10px;
  }

  .el-input {
    width: 448px;
    height: 40px;

    &:deep(.el-input__wrapper) {
      background-color: #2d3a4b;
    }
  }

  .el-button {
    width: 448px;
    height: 40px;
    margin-top: 30px;
  }

  .box-fort {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;

    p {
      color: white;
      font-size: 14px;
    }

    .px {
      color: #ffa500;
    }
  }
}
</style>

<script setup>
import { UserFilled, Lock, PictureFilled, Search, Check } from "@element-plus/icons-vue";
import { size } from "lodash";
import { useRouter } from "vue-router"
import { reactive, ref } from "vue"
import { onMounted } from "@vue/runtime-core";
import { login } from "../api/index"
const router = useRouter()
let data = reactive({
  k: "",
  src: "https://user.api.it120.cc/code",
  ruleForm: {
    userName: '',
    pwd: '',
    imgcode: '',
    rememberMe: false
  },
  rules: {
    userName: [{ required: true, message: "账号不能为空" }],
    pwd: [{ required: true, message: "密码不能为空" }],
    imgcode: [{ required: true, message: "验证码不能为空" }]
  }
})


// 图片验证
function ver() {
  data.k = Math.random();
  data.src = "https://user.api.it120.cc/code?k=" + data.k
}

let ruleFormRef = ref()

function submitForm() {
  ruleFormRef.value.validate((valid) => {
    console.log(valid)
    if (valid) {
      data.ruleForm["k"] = data.k

      login(data.ruleForm).then(res => {
        console.log(res)
        if(res.code === 0){
          window.localStorage.setItem("token",res.data.token)
          router.push("/index")
        }
      })
    }
  })
}

onMounted(() => {
  ver()
})
</script>